@import "common.less";
@import "../icons/iconfont.css";

@borde-color: #e9e9e9;
@primary-color: #16a1e0;

body,
html {
  position: relative;
  height: 100%;
  background-color: #fff;
  overflow-x: hidden;
}

.content {
  position: relative;
  z-index: 999;
  width: 750 * @rem;
  margin: 0 auto;
}

.header {
  color: #fff;
  width: 100%;
  height: 90 * @rem;
  background-color: #16a1e0;
  margin: 0 auto;
  position: relative;
  .btnback {
    .fontSize(16px);
    position: absolute;
    top: 50%;
    left: 15 * @rem;
    transform: translateY(-50%);
    color: #fff;
  }
  h2 {
    text-align: center;
    color: #fff;
    .fontSize(16px);
    line-height: 90 * @rem;
  }

}

.personal-data {
  padding: 0 30 *@rem;
  margin-top: 30 * @rem;
  .main-conent {
    padding: 20px;
    .title {
      height: 50 * @rem;
      line-height: 50 * @rem;
      position: relative;
      margin-bottom: 20 * @rem;
      .right {
        float: right;
        right: 20px;
        top: 5px;

        a {
          color: @primary-color;
        }
      }
      .left {
        .fontSize(16px);
        font-weight: bold;
        color: @primary-color;
      }
    }
    .sub-title {
      .fontSize(14px);
      font-weight: bold;
      color: #333;
      height: 50 * @rem;
      line-height: 50 * @rem;
    }
    .info-form {
      width: 100%;
      .form-item {
        height: 80 * @rem;
        .form-item__label {
          .fontSize(14px);
          float: left;
          width: 100 * @rem;
          height: 100%;
          height: 80 * @rem;
          line-height: 110 * @rem;
          text-align: right;
          padding-right: 10px;
          box-sizing: border-box;
        }
        .form-item__content {
          margin-left: 110 * @rem;
          height: 100%;
          border-bottom: 1px solid #ccc;
          box-sizing: border-box;
          input {
            .fontSize(14px);
            height: 100%;
            width: 100%;
            padding: 0;
            padding-top: 25 * @rem;
            box-sizing: border-box;
            border: none;
            text-indent: 20 * @rem;
          }
        }
      }
      .form-item.button {
        height: 60 * @rem;
        position: relative;
        margin-top: 30 * @rem;
      }
      .save-btn {
        .fontSize(14px);
        height: 100%;
        width: 280 * @rem;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
        background: @primary-color;
        border-radius: 5px;
        border: none;
        color: #fff;
      }
    }

  }

}

#mask {
  position: fixed; //利用固定定位的好处：页面还可以上下翻动，但是始终处于灰色背景下
  top: 0;
  left: 0;
  z-index: 1000;
  display: none;
  background: rgba(0, 0, 0, 0.3);
  width: 100%;
  height: 100%;

}